<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem;
            position: absolute;
            z-index: 222;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 14.2rem;
            height: 11.3rem;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .btns {
            display: flex;
            flex-direction: row;
            margin: 2rem 1.2rem 1.2rem 1.2rem
        }

        .btn {
            width: 5.6rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-radius: 1rem;
            border: 1px solid #CCCCCC
        }

        .success img {
            width: 2.5rem;
            height: 2.5rem;
            margin-bottom: .6rem;
            margin-top: 2rem
        }

        .success {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="dialog" class='font-14 text-color-3' tapmode onclick="api.closeFrame()">
        <div class="success">
            <img src="../image/order/wancheng.png" alt="">
            <div class="font-semibold">
                支付成功
            </div>
        </div>
        <div class="btns">
            <button class='btn' type="button" name="button" style="margin-right:0.6rem">查看订单</button>
            <button class='btn' type="button" name="button">返回首页</button>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
    $api.addCls(dialog, 'in');
    apiready = function() {
        // $(document.body).on('touchend', function(e) {
        //     var dialog = $("#dialog")[0];
        //     if (!$.contains(dialog, e.target)) {
        //         $('#dialog').removeClass('in');
        //         setTimeout(function() {
        //             api.closeFrame();
        //         }, 200);
        //     }
        // });
    };
</script>

</html>
